<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/kit/layui/css/layui.css">
    <title>Document</title>
    <style>
        .layui-form {
            margin-top: 20px;
        }
    </style>
</head>

<body>
    <form class="layui-form">
        <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
        <div class="layui-form-item">
            <label class="layui-form-label"></label>
            <div class="layui-input-inline">
                <select lay-filter="search" name="type">
                    <option value="1">根据商品ID搜索</option>
                    <option value="2">根据商品名搜索</option>
                    <option value="3">根据商品类别搜索</option>
                    <option value="4">根据商品状态搜索</option>
                </select>
            </div>
            <div class="layui-input-inline search" id="search_detail">
                <input type="text" name="search" placeholder="请输入搜索内容" autocomplete="off" class="layui-input">
            </div>
            <button class="layui-btn" lay-submit lay-filter="go">立即搜索</button>
        </div>
    </form>
    <table class="layui-hide" id="mygoods" lay-filter="mygoods"></table>
</body>

<script type="text/html" id="state">
    {{#  if(d.state == 1){ }}
    <button type="button" class="layui-btn  layui-btn-sm  layui-btn-radius">在售</button>
    {{#  } }} 
    {{#  if(d.state == 2){ }}
    <button type="button" class="layui-btn  layui-btn-sm  layui-btn-radius layui-btn-danger">缺货</button>
    {{#  } }} 
    {{#  if(d.state == 3){ }}
    <button type="button" class="layui-btn  layui-btn-sm  layui-btn-radius layui-btn-disabled">下架</button>
    {{#  } }} 
</script>

<script type="text/html" id="bar">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">下架</a>
</script>


<script src="/kit/layui/layui.js"></script>
<script>
    layui.use(['table', 'form'], function () {
        let data;
        var form = layui.form;
        let table = layui.table;
        let $ = layui.jquery;
        form.on('select(search)', function (data) {
            if (data.value == 4) {
                $("#search_detail").html(`
                    <select name="search" >
                        <option value="1">在售</option>
                        <option value="2">缺货</option>
                        <option value="3">下架</option>
                    </select>
                `);
            }
            else {
                $("#search_detail").html(`<input type="text" name="search" placeholder="请输入搜索内容" autocomplete="off" class="layui-input" >`);
            }
            form.render();
        });
        form.on('submit(go)', function (data) {
            if(!data.field.type || !data.field.search)
            {
                layer.msg("参数不能为空");
                return false;
            }
            $.ajax({
                type: 'GET',
                url: '/php/api/goods/v1.api.search.php',
                data: {
                    search:data.field.search,
                    type: data.field.type
                },
                dataType: 'json'
            }).done(function (data) {
                // data = data;
                console.log(data);
                //展示已知数据
                table.render({
                    elem: '#mygoods',
                    cols: [[ //标题栏
                        { field: 'goods_id', title: 'ID', sort: true },
                        { field: 'name', title: '商品名', },
                        { field: 'goods_price', title: '进货价格', },
                        { field: 'sale_price', title: '销售价格', sort: true },
                        { field: 'inventor', title: '库存', },
                        { field: 'sale_num', title: '销量', sort: true },
                        { field: 'intro', title: '简介', },
                        { field: 'state', title: '状态', templet: '#state' },
                        { field: 'operation', title: '操作', templet: '#bar', width: 180 },
                    ]]
                    , data: data.data
                    , even: true
                    , page: {
                        count: data.size
                    }
                    , limit: 10 //每页默认显示的数量
                });
                table.on('tool(mygoods)', function (obj) {
                    var data = obj.data;
                    if (obj.event === 'detail') {
                        layer.open({
                            title: '商品详情',
                            type: 2,
                            content: '/view/goods/detail.html?good_id=' + data.goods_id,
                            area: ['800px', '600px']
                        });
                    } else if (obj.event === 'del') {
                        layer.confirm('真的下架id为' + data.goods_id + "的商品吗", function (index) {
                            $.ajax({
                                type: 'post',
                                url: '/php/api/goods/v1.api.soldout.php',
                                data: {
                                    goods_id: data.goods_id
                                },
                                dataType: 'json'
                            }).done(function (data) {
                                console.log(data);
                                window.parent.location.reload();
                            }).fail(function () {
                                console.log(goods_id)
                            });
                            layer.close(index);
                        });
                    } else if (obj.event === 'edit') {
                        window.location.href = "/view/goods/mod.html?goods_id=" + data.goods_id;
                    }
                });
            })
                .fail(function (xhr, status) {
                    console.log("检查失败了" + status + xhr);
                });

            return false; //阻止表单跳转。
        });
    }); 
</script>

</html>